<!-- 微信授权登录页面 -->
<template>
	<view class="wxLogin_content">
		<image class="wxLogin_content_img" src="/static/img/login/bigbg.png" mode=""></image>
		<image class="wxLogin_content_small_img" src="/static/img/login/bg.png" mode=""></image>
		<view class="wxLogin_wappar">

		</view>
		<view class="wxLogin_wappar_parent">

		</view>
		<view class="wxLogin_parent">
			<view class="wxLogin_parent_top">
				<view class="wxLogin_parent_top_img" v-if="avatarUrl">
					<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
				</view>
				<template v-else>
					<view class="wxLogin_parent_top_title font24 text">
						头像
					</view>
					<view class="wxLogin_parent_top_body">
						<button class="wxLogin_parent_top_body_btn font27 text" open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
							微信授权头像
						</button>
					</view>
				</template>

			</view>
			<view class="wxLogin_parent_top">
				<view class="wxLogin_parent_top_title font24 text">
					昵称
				</view>
				<view class="wxLogin_parent_top_body">
					<input type="nickname" class="weui-input" placeholder="请点击选择昵称" v-model="value" @blur="inputBlur" />
				</view>
			</view>
			<view class="wxLogin_parent_top">
				<view class="wxLogin_parent_top_title font24 text">
					手机号
				</view>
				<view class="wxLogin_parent_top_body">
					<input v-if="phone" class="weui-input" placeholder="请授权手机号" v-model="phone" />
					<button v-else class="wxLogin_parent_top_body_btn font27 text" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">授权手机号</button>
				</view>
			</view>
			<button class="wxLogin_btn">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '', //头像
				value: '', //昵称
				phone: '', //手机号
			};
		},
		methods: {
			//获取头像
			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl, '成功');
				this.avatarUrl = e.detail.avatarUrl
				// this.$uploadImage(e.detail.avatarUrl).then(res => {
				// 	console.log(JSON.parse(res.data), '成功');
				// 	this.avatarUrl = this.imgUrl + JSON.parse(res.data).data;
				// 	this.headImg = JSON.parse(res.data).data;
				// 	this.show = false;
				// 	uni.setStorageSync('avatarUrl', JSON.parse(res.data).data);
				// });
			},
			//获取昵称
			inputBlur(e) {
				const {
					value
				} = e.detail;
				console.log(value);
				this.value = value;
				// uni.setStorageSync('name', value);
			},
			//获取电话号码
			async getPhoneNumber(e) {
				// console.log(e.detail.code, '手机号', this.nickname);
				try {
					let res = await Request.post({
						url: `/app/login/public/getPhonenumber`,
						data: {
							code: e.detail.code
						}
					});
					console.log(res.data.phoneNumber, uni.getStorageSync('name'), '手机号');
					uni.setStorageSync('phone', res.data.phoneNumber);
					this.phone = res.data.phoneNumber;
					this.phoneShow = true;
					let resb = await Request.post({
						//微信小程序注册
						url: `/app/login/public/wxRegister`,
						data: {
							phone: uni.getStorageSync('phone'),
							nickName: uni.getStorageSync('name'),
							headimage: this.headImg,
							openid: uni.getStorageSync('openid')
						}
					});
					console.log(resb.data.token, uni.getStorageSync('phone'), '注册成功');
					uni.setStorageSync('token', resb.data.token);
				} catch (e) {
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style lang="scss">
	.wxLogin_content {
		width: 750rpx;
		height: 100vh;
		overflow-y: scroll;
		position: relative;

		.wxLogin_wappar {
			position: absolute;
			left: 39rpx;
			top: 409rpx;
			width: 701rpx;
			height: 672rpx;
			background: #FFFFFF;
			opacity: 0.14;
			border-radius: 40rpx;
		}

		.wxLogin_wappar_parent {
			width: 701rpx;
			height: 672rpx;
			background: #FFFFFF;
			opacity: 0.08;
			border-radius: 40rpx;
			position: absolute;
			left: 39rpx;
			top: 428rpx;
		}

		&_img {
			width: 750rpx;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}

		&_small_img {
			width: 302rpx;
			height: 153rpx;
			position: absolute;
			left: 224rpx;
			top: 173rpx;
			z-index: 2;
		}

		.wxLogin_parent {
			background: #FFFFFF;
			box-shadow: 0rpx 14rpx 8rpx 2rpx rgba(73, 87, 238, 0.08);
			border-radius: 40rpx;
			position: absolute;
			width: 700rpx;
			height: 672rpx;
			top: 384rpx;
			left: 24rpx;
			padding: 10rpx 28rpx 60rpx 60rpx;

			&_top {
				margin-top: 50rpx;

				&_title {
					color: #333333;
				}

				&_body {
					border-bottom: 1rpx solid #333333;

					&_btn {
						color: #333333;
					}
				}

			}

		}


	}

	button {
		margin: 0;
		padding: 0;
		background-color: transparent;
		text-align: left;
	}

	button::after {
		border: none;
		margin: 0;
		padding: 0;
		text-align: left;
		color: #333333;
	}

	.weui-input {
		margin-top: 25rpx;
		font-size: 27rpx;

		&:placeholder {
			color: #333333;
		}
	}

	.wxLogin_parent_top_img {
		width: 100%;
		text-align: center;

		.avatar {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
	}

	.wxLogin_btn {
		width: 575rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #E7C18B 0%, #FFB445 100%);
		border-radius: 44rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		margin-top: 57rpx;
	}
</style>